<template>
  <div class="container">
    <header>
      <div>
        <p>最美的不是界面，</p>
        <p>而是你的留言~~</p>
      </div>
    </header>
    <main>
      <div class="first-message animated" v-for="(item, index) in dataList" :key="index">
        <div class="first-message-header-img">
          <img src="../../assets/logo.png" alt="">
        </div>
        <div class="first-message-content">
          <div class="first-message-detail">
            <p style="font-size: 14px;margin-bottom: 5px">{{ item.Username }}</p>
            <p style="font-size: 12px;margin-bottom: 5px;color: #999">{{ item.Date }}</p>
            <div v-html="item.Message"></div>
          </div>
          <div class="reply-message" v-for="(ritem, rindex) in item.Reply" v-show="rindex<2" :key="rindex">
            <div class="reply-message-header-img">
              <img src="../../assets/logo.png" alt="">
            </div>
            <div class="reply-message-content">
              <p style="font-size: 14px;margin-bottom: 5px">
                <span>{{ ritem.Username }}</span>
                <span>@{{ ritem.ToUsername }}</span>
              </p>
              <p style="font-size: 12px;margin-bottom: 5px;color: #999">{{ ritem.Date }}</p>
              <div v-html="ritem.Message"></div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin: 10px 0 20px 0">
        <van-pagination v-model="Page.PageIndex" @change="BLL.GetMessage()" :total-items="Page.Total" :items-per-page="Page.PageSize" mode="simple"></van-pagination>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script>
  import BLL from './Index'
  export default {
    components: {
    },
    data () {
      return {
        dataList: [],
        Page: {
          PageIndex: 1,
          PageSize: 5,
          Total: 0
        }
      }
    },
    computed: {
      showLoading () {
        return this.$store.state.global.showLoading
      }
    },
    created () {
      // 初始化
      this.BLL = new BLL(this)
    },
    mounted () {
      this.$nextTick(() => {
        this.BLL.GetMessage()
      })
    }
  }
</script>

<style lang="less" scoped>
  @import "Index";
</style>
